<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米</title>
</head>
<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      list-style: none;
    }
    .all{
        max-width: 1920px;
        min-width: 1200px;
    }
    nav{
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    nav>img:first-of-type{height: 50px;}
    input{
        width: 200px;
        height: 50px;
        border: none;
        border-right:1px solid #cecece;
    }
    input+img{height: 50px;}
    .input{
        display: flex;
        border: 1px solid #cecece;
    }
    ul{
        width: 700px;
        display: flex;
        justify-content: space-between;
    }
    nav~img{
        width: 1200px;
        display: none;}
    li:hover{
        color: rgb(243, 114, 22);
        cursor: pointer;/*将鼠标箭头变成手指*/
    }
</style>
<body>
    <div class="all">
        <nav>
            <img src="./img/logo-mi.png">
            <ul>
                <li>Xiaomi手机</li>
                <li>Redmi手机</li>
                <li>电视</li>
                <li>笔记本</li>
                <li>平板</li>
                <li>家电</li>               
                <li>路由器</li>
                <li>服务中心</li>
                <li>社区</li>
            </ul>
            <div class="input">
                <input type="text"/>
                <img src="./img/find.png">
            </div>
        </nav>
        <img src="./img/XiaoMi手机.png">
        <img src="./img/Redmi手机.png">
        <img src="./img/电视.png">
        <img src="./img/笔记本.png">
        <img src="./img/平板.png">
        <img src="./img/家电.png">
        <img src="./img/路由器.png"> 
    </div>
    <script>
        let li=document.querySelectorAll('li')
        let img=document.querySelectorAll('img')
        li[0].addEventListener('mouseenter',()=>{
            img[2].style.display='block'
        })
        li[0].addEventListener('mouseleave',()=>{
            img[2].style.display='none'
        })
        li[1].addEventListener('mouseenter',()=>{
            img[3].style.display='block'
        })
        li[1].addEventListener('mouseleave',()=>{
            img[3].style.display='none'
        })
        li[2].addEventListener('mouseenter',()=>{
            img[4].style.display='block'
        })
        li[2].addEventListener('mouseleave',()=>{
            img[4].style.display='none'
        })
        li[3].addEventListener('mouseenter',()=>{
            img[5].style.display='block'
        })
        li[3].addEventListener('mouseleave',()=>{
            img[5].style.display='none'
        })
        li[4].addEventListener('mouseenter',()=>{
            img[6].style.display='block'
        })
        li[4].addEventListener('mouseleave',()=>{
            img[6].style.display='none'
        })
        li[5].addEventListener('mouseenter',()=>{
            img[7].style.display='block'
        })
        li[5].addEventListener('mouseleave',()=>{
            img[7].style.display='none'
        })
        li[6].addEventListener('mouseenter',()=>{
            img[8].style.display='block'
        })
        li[6].addEventListener('mouseleave',()=>{
            img[8].style.display='none'
        })
    </script>
</body>
</html>